/** @format */

// 按需导入 createApp 函数
import { createApp } from 'vue'
// 导入 App.vue
import App from './App.vue'
// 创建应用
const app = createApp(App)

app.directive('color', {
	// 指令所在的DOM元素变成真实DOM了，会自动执行一次；
	// 换句话说，当指令所在表达式的值变了，该函数不会再次执行了
	mounted(el, binding) {
		// el: 指令所在元素
		// binding: 指令绑定的信息对象，binding.value 获取指令表达式的结果
		el.style.color = binding.value

		console.log('1-mounted')
	},
	// 每次指令绑定表达式的值变了，都会执行一次
	updated(el, binding) {
		el.style.color = binding.value
		console.log('2-updated')
	}
})

// 指定渲染的位置
app.mount('#app')
